<template>
  <div>
    <input type="button" @click="addCount" value="OK" />
    <p>{{ count }}</p>
    <p>{{ myCount }}</p>
    <div>
      <el-button icon="el-icon-plus" circle @click="addTime"></el-button>
    </div>

    <div v-for="(t, index) in times" :key="t">
      <el-time-picker
        is-range
        v-model="times[index]"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
        format="HH:mm"
      >
      </el-time-picker>
      <!-- <el-transfer v-model="value" :data="data"></el-transfer> -->
      <el-button
        icon="el-icon-minus"
        circle
        @click="delTime(index)"
      ></el-button>
    </div>
    <el-button type="primary" @click="add">确定</el-button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import { addPetService, showPetService } from '../service';
export default {
  async created(){
    let response = await showPetService();
    console.log("response.data",response.data.times)
    this.times = JSON.parse(response.data.times);
  },
  data() {
    return {
      times: [],
      data:[
        {key:1,label:'学生管理'},
        {key:2,label:'班级管理'},
        {key:3,label:'课程管理'},
        {key:4,label:'统计'}
      ],
      value:[]
    };
  },
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["myCount"]),
  },
  methods: {
    addCount() {
      console.log(this.$store);
      // this.$store.commit("increment");
      // console.log(this.$store)
      this.increment();
    },
    addTime() {
      this.times.push([new Date(),new Date()]);
    },
    delTime(index) {
      this.times.splice(index, 1);
    },
    add() {
      console.log("time:", this.times);
      console.log("value",this.value);
      for(let i = 0;i < this.times.length;i++){
        for(let j = 0;j < this.times[i].length;j++){
          if(this.times[i][j] instanceof Date){
            this.times[i][j] = this.times[i][j].getTime() ;
          }
          
        }
      }
      addPetService({times:JSON.stringify(this.times)});
    },
    ...mapMutations(["increment"]),
  },
};
</script>

<style>
</style>